<template>
  <div class="custom-body-content">
    <div class="office-hall-header">
      <el-image lazy :src="entity.backImage" />
      <div class="office-hall-bt">
        <div class="office-hall-custom">
          <div class="office-hall-h1">{{ entity.name }}</div>
          <div class="office-hall-p">
            {{ entity.summary }}
          </div>
          <!--            <el-carousel height="385px">
              <el-carousel-item :key="1">

              </el-carousel-item>
              &lt;!&ndash;              <el-carousel-item :key="2">
                <div class="office-hall-h1">邮箱使用常见问题及解决方案</div>
                <div class="office-hall-p">
                  1. 用户邮箱连续收到几十封来自不同邮件地址的系统退信邮件，但是该用户并没有给这些退信邮箱发过信件。该用户的邮箱账号被盗来发送垃圾邮件。修改密码为8位以上“数字+字母+字符”的强密码。修改完密码之后，在72小时内还可能会收到这样的退信，因为一些...
                </div>
              </el-carousel-item>
              <el-carousel-item :key="3">
                <div class="office-hall-h1">VPN使用手册</div>
                <div class="office-hall-p">
                  本部分主要介绍了SSL VPN 客户端的安装和使用。 1.1. 环境要求1、客户端计算机已经接入因特网，并且网络通信正常。2、计算机必须安装浏览器。SSL VPN 客户端支持Windows 操作系统、Linux 操作系统和Mac OS X 操作系统，支持苹果，安卓等手机接入；支持多种...
                </div>
              </el-carousel-item>
              <el-carousel-item :key="4">
                <div class="office-hall-h1">校园无线常见问题</div>
                <div class="office-hall-p">
                  1．为什么无线连接成功打不开认证页面？1) 此无线使用设备以前登陆过其他账号，我们的无线账号都开启着无感知认证，认证一次之后会把MAC地址记录在这个账号下，以后都会通过无感知认证登录这个账号；2) 无线认证的DNS必须是学校默认的DNS（202.117.112.3）...
                </div>
              </el-carousel-item>&ndash;&gt;
            </el-carousel>-->
        </div>
      </div>
    </div>
    <div class="office-hall-content">
      <div class="office-hall-half">
        <div class="office-hall-line">
          服务说明
        </div>
        <div class="office-hall-body" v-html="entity.explain" />
        <div class="office-hall-line">
          资料下载
        </div>
        <div class="office-hall-download">
          <div v-for="(item,index) in fjList" :key="'fj-'+index" class="office-file-li">
            <el-card shadow="hover">
              <div class="li-content" @click="download(item)">
                <div class="custom-image"><el-image :src="getSrc(item)" /></div>
                <div class="lin-title">{{ item.fileName }}</div>
                <div class="lin-size">{{ item.size }}</div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="office-hall-half">
        <div v-for="(item,index) in servers" :key="'ser-'+index" class="office-hall-service-li">
          <div class="hall-service-left">
            <div class="hall-service-left-image">
              <el-image :src="item.service.pcIcon" />
            </div>
            <div class="hall-service-left-content"><div class="left-body" /></div>
          </div>
          <div class="hall-service-right">
            <div class="hall-service-right-title">{{ item.service.name }}</div>
            <div class="hall-service-right-content">
              <div class="hall-service-right-body">
                <el-card shadow="always" :style="{ background: 'url('+bak3+') no-repeat 95% 0', backgroundSize: '40% 100%' }">
                  <div class="custom-card">
                    <div class="hall-body">{{ item.jj }}</div>
                    <div class="hall-service-right-button" />
                    <div v-if="guest === false" class="hall-button" @click="openEntity(item)"><span style="width: 100%;height: 100%">开始办理</span></div>
                    <div v-if="guest === true" class="hall-button disabled"><span style="width: 100%;height: 100%">开始办理</span></div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { queryEntity, queryGuestEntity } from '@/api/yslb/index'
export default {
  name: 'ServerEntityV2',
  props: {
    params: {
      type: Array
    },
    temp: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  data() {
    return {
      doc: require('@/assets/images/doc.png'),
      eps: require('@/assets/images/eps.png'),
      excel: require('@/assets/images/excel.png'),
      gif: require('@/assets/images/gif.png'),
      pdf: require('@/assets/images/pdf.png'),
      ppt: require('@/assets/images/ppt.png'),
      txt: require('@/assets/images/txt.png'),
      zip: require('@/assets/images/zip.png'),
      bak3: require('@/assets/images/003.png'),
      dataList: [],
      queryParameter: {},
      queryData: [],
      enclosureList: [],
      setting: {},
      tid: null,
      entity: {},
      fjList: [],
      servers: [],
      guest: true
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        this.dataList = []
        this.queryParameter = Object.assign({})
        this.queryData = []
        this.enclosureList = []
        if (undefined !== newName.pzx && newName.pzx !== null) {
          this.setting = JSON.parse(newName.pzx)
          this.dataList = this.setting.data
        }
        this.tid = newName.id
        if (getToken()) {
          this.guest = false
        }
        this.initEntity()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    openEntity(item) {
      window.open(item.service.openUrl)
    },
    download(item) {
      window.open(item.url, '_blank')
    },
    getSrc(item) {
      if (item.suffix === 'doc' || item.suffix === 'docx') {
        return this.doc
      }
      if (item.suffix === 'xls' || item.suffix === 'xlsx') {
        return this.excel
      }
    },
    initEntity() {
      const query = {}
      if (this.params !== null && this.params.length > 0) {
        this.params.forEach(item => {
          query[item.code] = item.value
        })
      }
      if (getToken()) {
        queryEntity(query).then(res => {
          const { data } = res
          this.entity = data.entity
          this.fjList = data.fjList
          this.servers = data.servers
        })
      } else {
        queryGuestEntity(query).then(res => {
          const { data } = res
          this.entity = data.entity
          this.fjList = data.fjList
          this.servers = data.servers
        })
      }
    }
  }
}
</script>

<style scoped>
.custom-body-content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 5px;
  box-sizing: border-box;
}

.office-hall-header {
  flex: 0 1 auto;
  width: 100%;
  height: 385px;
  position: relative;
}
.office-hall-bt {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
}

.office-hall-header .el-image {
  width: 100%;
  height: 100%;
}

.office-hall-content {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.office-hall-half {
  width: 50%;
  height: 100%;
  flex: 0 1 auto;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}

.office-hall-line {
  width: 100%;
  height: 50px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  font-size: 20px;
  font-weight: bold;
  line-height: 50px;
  text-indent: 20px;
}

.office-hall-body {
  width: 100%;
  height: auto;
  line-height: 40px;
  text-indent: 20px;
}

.office-hall-download {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
}

.office-file-li {
  width: 33.333%;
  flex: 0 1 auto;
  height: 80px;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.li-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.custom-image {
  flex: 0 1 auto;
  width: 60px;
  height: 60px;
}
.lin-title {
  flex:  1 1 auto;
  height: 60px;
  line-height: 60px;
}
.lin-size {
  flex: 0 1 auto;
  height: 60px;
  width: 50px;
  font-size: 13px;
  color: #909399;
  line-height: 96px;
  text-align: center;
}
.office-hall-service-li {
  flex: 0 1 auto;
  width: 100%;
  height: 180px;
  display: flex;
  flex-flow: row nowrap;
}
.hall-service-left {
  flex: 0 1 auto;
  width: 40px;
}
.hall-service-right {
  flex: 1 1 ;
  box-sizing: border-box;
}
.hall-service-left,.hall-service-right {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.hall-service-right-title {
  line-height: 32px;
  font-size: 18px;
}
.hall-service-left-image,.hall-service-right-title {
  width: 100%;
  height: 40px;
  flex: 0 1 auto;
  padding: 4px;
  box-sizing: border-box;
}
.hall-service-left-image .el-image {
  width: 100%;
  height: 100%;
}
.hall-service-right-content {
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
}
.hall-service-left-content {
  padding: 0px 16px;
}
.hall-service-right-content,.hall-service-left-content{
  box-sizing: border-box;
  flex: 1 1 auto;
}
.hall-body {
  line-height: 25px;
  text-indent: 20px;
  height: 100%;
  flex: 0 1 auto;
  width: calc(100% - 40px);
}
.left-body {
  width: 100%;
  height: 100%;
  background-color: #409EFF;
  border-radius: 4px;
}
.hall-service-right-body {
  width: 100%;
  height: 100%;
}
.custom-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 5px 10px;
  box-sizing: border-box;
  position: relative;
}
.hall-service-right-button {
  flex: 0 1 auto;
  height: 100%;
  width: 40px;
  text-align: center;
  color: #ffffff;
  padding: 12px 0px;
  box-sizing: border-box;
}
.hall-button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 50px;
  bottom: -5px;
  background-color: #00a0e9;
  padding: 21px 17px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
}
.hall-button:hover{
  background-color: #0a84ff;
}
.hall-button.disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
.hall-button.disabled:hover{
  background-color: #a0cfff;
}
.office-hall-custom {
  width: 100%;
  height: 100%;
  padding: 89px;
  box-sizing: border-box;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
.el-card {
  width: 100%;
  height: 100%;
}
.el-card >>> .el-card__body {
  padding: 5px;
  height: 100%;
}
.office-hall-h1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 6px;
}
.office-hall-p {
  line-height: 30px;
  text-indent: 30px;
  margin-top: 30px;
  width: 50%;
  color: #fff;
  font-weight: 580;
}
.el-carousel >>> .el-carousel__indicators--horizontal{
  display: none;
}
</style>
